<html>
<head>
	<title>{% block page_title %}X Marks the Spot{% endblock %}</title>
	<style>
		body {
			font-family: Arial;
			background-color: #cccccc;
			color: #333333;
		}
		
		a {
			color: #3333ff;
		}
		
		a:hover {
			color: #000000;
		}
		
		h1 {
			padding: 10px;
			text-align: center;
		}
		
		#content {
			margin-left: auto;
			margin-right: auto;
			width: 600px;
			border: 1px solid #000000;
			padding: 20px;
		}
		
		table {
			margin-left: auto;
			margin-right: auto;
			width: 500px;
			border: 1px solid #000000;
		}
		
		thead > td, .selector {
			font-weight: bold;
			text-align: center;
		}
		
		td {
			border: 1px solid #000000;
			padding: 3px;
		}
		
		#add_form {
			margin-left: auto;
			margin-right: auto;
		}
		
		.full {
			width: 100%;
		}
		
		.message {
			text-align: center;
			color: #CC0000;
		}
	</style>
</head>
<body>
	<h1>{% block title %}X Marks the Spot{% endblock %}</h1>
	
	{% for message in messages %}
		<div class="message">{{message}}</div>
	{% endfor %}
	
	<div id="content">
		{% block content %}
			<p>There was a problem.  <a href="javascript:history.go(-1)">Go back</a> and try again, or <a href="/">go home</a> to think about what you've done.</p>
		{% endblock %}
	</div>
</body>
</html>